import ReactECharts from 'echarts-for-react';
import { Empty } from 'antd';
import useWindowWidth from '@/hooks/event/use-window-width';
import { highschoolconsultations } from '@/common/types';
import { useEffect, useState } from 'react';
import { format } from 'echarts';


interface Props {
  data: highschoolconsultations[];
  isdataZoom?: boolean
}

const UserActiveLine = ({ data, isdataZoom }: Props) => {


  console.log("highschoolconsultations============", data)

  const { isPc } = useWindowWidth();

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const option = {
    grid: {
      left: isPc ? '2%' : '6%', // 左边距
      right: isPc ? '2%' : '6%', // 右边距
      bottom: '5%', // 底部距离
      top: '5%', // 顶部距离
      containLabel: true, // 包含坐标轴的标签
    },
    xAxis: {
      type: 'category',
      data: data && data.map((item) => item.school),
      axisLabel: {
        // rotate: 30, // 旋转角度（30度）
        // interval: 0, // 强制显示所有标签
        width: 80,  // 标签最大宽度（可选）
        overflow: 'truncate', // 超出部分显示省略号
        interval: 'auto',
      }
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        return `${params[0].name}：${params[0].value}`
      }
    },
    dataZoom: isdataZoom ? [
      {
        show: true,  // 显示控制条（仅作为视觉提示）
        start: 0,
        end: (data.length > 8) ? (8 / data.length * 100) : 100,
        // 彻底禁用所有交互
        zoomLock: true,
        moveOnMouseMove: false,
        moveOnMouseWheel: false,
        preventDefaultMouseMove: true,
        // 隐藏所有可操作元素
        handleIcon: 'none',      // 隐藏拖动按钮
        handleSize: 0,           // 设置手柄大小为0
        handleStyle: {
          opacity: 0             // 完全透明手柄
        },
        // 禁用数据阴影（刷选区域）
        brushSelect: false,
        fillerColor: 'transparent',
        borderColor: 'transparent'
      }
    ] : null,
    series: [
      {
        data: data && data.map((item) => item.consult_count),
        type: 'bar',
        barWidth: 28,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,  // 从左到右渐变
            y: 0,
            x2: 0, // 垂直方向渐变
            y2: 1,
            colorStops: [
              {
                offset: 0, // 0% 处的颜色

                color: '#1B6DFA'
              },
              {
                offset: 1, // 100% 处的颜色
                color: '#DDE6FF'
              }
            ],
            global: false // 缺省为 false
          },
          // borderRadius: [4, 4, 0, 0] // 可选：顶部圆角
        },
      }
    ],
  };

  return (
    mounted ?
      <div
        style={{
          minHeight: isPc ? 'unset' : '250px',
          height: 'calc(100% - 20px)',
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          // backgroundColor: data.length > 0 ? '#ECEFF7' : '',
        }}
      >
        {data && data.length > 0 ? (
          <ReactECharts option={option} style={{ height: isPc ? '100%' : '100%', width: '100%' }} />
        ) : (
          <Empty description="暂无数据" />
        )}
      </div> : <div>Loading...</div>
  )
}

export default UserActiveLine